<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成绩分析</title>
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap-icons/bootstrap-icons.css">
    <link rel="stylesheet" href="css/dashboard.css">
</head>
<body>
<div class="container">
    <div class="container-header">
        <div class="d-flex justify-content-between align-items-center">
            <h2><i class="bi bi-bar-chart-line"></i> 考试成绩分析</h2>
            <a href="index.html" class="btn btn-primary">
                <i class="bi bi-upload"></i> 上传数据
            </a>
        </div>
    </div>

    <!-- Toast 容器 - 新增 -->
    <div class="toast-container position-fixed top-0 end-0 p-3" id="toastContainer">
    </div>
    
    <!-- Sheet 选择 tab 栏 -->
    <ul class="nav nav-tabs sheet-tabs" id="sheetTabs">
        <!-- Sheet tabs 将通过 JavaScript 动态添加 -->
    </ul>

    <div class="part-container">
        <div class="selector">
            <label for="exam-select">
                <i class="bi bi-file-text"></i> 选择考试
            </label>
            <select id="exam-select" class="form-select">
            </select>
        </div>

        <div class="exam-header">
            <h3 id="exam-code" class="mb-0"></h3>
            <div class="toggle-button" onclick="clinkCodeSwitch()">
                <div class="toggle-item" id="switch-code">学号</div>
                <div class="toggle-item active" id="switch-name">姓名</div>
            </div>
        </div>

        <div class="summary-table">
            <table>
                <thead>
                <tr>
                    <th><i class="bi bi-calculator"></i> 平均分</th>
                    <th><i class="bi bi-graph-up"></i> 及格率</th>
                    <th><i class="bi bi-trophy"></i> Top 3</th>
                    <th><i class="bi bi-exclamation-triangle"></i> Bottom 3</th>
                    <th><i class="bi bi-people"></i> 考试人数</th>
                    <th><i class="bi bi-person-lines-fill"></i> 总人数</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td id="avgScore"></td>
                    <td id="passRate">%</td>
                    <td id="top3"></td>
                    <td id="bottom3"></td>
                    <td id="actualNum"></td>
                    <td id="expectedNum"></td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="part-chart-wrapper">
            <div class="data-container">
                <div id="detailedData"></div>
            </div>
            <div class="chart-container">
                <canvas id="barChart"></canvas>
            </div>
        </div>
    </div>

    <div class="part-container">
        <div class="selector">
            <label for="student-select">
                <i class="bi bi-person"></i> 选择学生
            </label>
            <select id="student-select" class="form-select">
                <!-- 动态学生姓名列表将通过JavaScript添加 -->
            </select>
        </div>
        <div class="content">
            <div class="table-container">
                <table>
                    <thead>
                    <tr>
                        <th><i class="bi bi-journal-text"></i> 测验名称</th>
                        <th><i class="bi bi-award"></i> 测验等级</th>
                        <th><i class="bi bi-graph-up-arrow"></i> 排名</th>
                    </tr>
                    </thead>
                    <tbody id="table-body">
                    <!-- 动态表格内容将通过JavaScript添加 -->
                    </tbody>
                </table>
            </div>
            <div class="chart-container" id="chart-container">
                <canvas id="rankingChart"></canvas>
            </div>
        </div>
    </div>
</div>

<script src="js/bootstrap/bootstrap.bundle.min.js"></script>
<script src="js/chart.js"></script>
<script src="js/chartjs-plugin-datalabels.js"></script>
<script src="js/data.js"></script>
<script src="js/group.js"></script>
<script src="js/student.js"></script>
<script src="js/sheets.js"></script>

</body>
</html>